<template>
    <a-input-number style="width: 200px;" :controls="false" v-model:value="valueTest" :formatter="(value:number) => numbertoString(value,'(搭载量)')"
        :parser="(value:string) => stringToNumber(value,'(搭载量)')"
        @change="test"></a-input-number>
        <span>{{ `数据更改：${valueTest}` }}</span>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

let valueTest = ref<number>(0)
const test = (value:number)=>{
    console.log('新数据',value);
    
}

const toThousands=(num:number) =>{
  return (+num || 0).toString().replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','));
}
// 创建一个函数
// 数据转字符串
const numbertoString = (val:number,str:string)=>{
    return `${toThousands(val)}${str}`
}
const stringToNumber = (val:string,str:string)=>{
    let middleStr = val.replace(',','')
    return Number(middleStr.replace(str,''))
}
</script>

<style scoped></style>